<template>
  <view class="lottery-grid" :style="[gridStyle]">
    <view
      v-for="(item, index) in gridItems"
      :key="index"
      :class="['grid-item', { 'prize-item': !item.isCenter }]"
      :style="[getItemStyle(item, index)]"
    >
      <template v-if="!item.isCenter">
        <slot :item="item" :index="index">
          <view class="grid-item-content">
            <image class="grid-item-content-bg" v-if="gridItemBg" :src="gridItemBg"></image>
            <image class="grid-item-content-img" :src="item.image"></image>
            <view class="grid-item-content-text">{{ item.name }}</view>
          </view>
        </slot>
      </template>
    </view>
    <view
      class="start-btn"
      :style="[startButtonStyle]"
      @click="!isRunning ? $emit('centerButtonClick') : null"
    >
      <slot name="centerButton" v-if="$slots && $slots.centerButton"></slot>
      <view class="start-btn-content" v-else>
        {{ isRunning ? '抽奖中...' : '开始' }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      rows: {
        type: Number,
        default: 3,
      },
      cols: {
        type: Number,
        default: 3,
      },
      minSpeed: {
        type: Number,
        default: 50,
      },
      maxSpeed: {
        type: Number,
        default: 300,
      },
      accelerationRate: {
        type: Number,
        default: 2,
      },
      gridItemBg: {
        type: String,
        default: '',
      },
      //
      prizes: {
        type: Array,
        required: true,
      },
      // 新增 prizeItemStyle prop
      prizeItemStyle: {
        type: Object,
        default: () => ({}),
      },
      // 新增 activeItemStyle prop
      activeItemStyle: {
        type: Object,
        default: () => ({
          backgroundColor: '#feca57',
        }),
      },
    },
    data() {
      return {
        isRunning: false, // 抽奖是否正在进行
        currentIndex: -1, // 当前高亮的格子索引
        targetIndex: -1, // 最终停止的目标索引
        speed: 50, // 初始转动速度（毫秒）
        rounds: 0, // 经完成的轮数
        minRounds: 3, // 最小旋转轮数
        totalSteps: 0, // 总步数（用于控制停止）
        gridItems: [], // 存储所有格子信息的数组
        sequence: [], // 存储边缘格子索引的数组（按顺时针顺序）
      };
    },
    computed: {
      gridStyle() {
        return {
          gridTemplateColumns: `repeat(${this.cols}, 1fr)`,
          gridTemplateRows: `repeat(${this.rows}, 1fr)`,
        };
      },
      startButtonStyle() {
        return {
          gridArea: `2 / 2 / ${this.rows} / ${this.cols}`,
        };
      },
    },
    created() {
      this.validatePrizes();
      this.initializeGrid();
    },
    methods: {
      validatePrizes() {
        const prizeSlots = (this.rows * this.cols) - (this.rows-2)*(this.cols-2); // 减去中心格子
        if (this.prizes.length !== prizeSlots) {
          throw new Error(
            `奖品数量不匹配。需要 ${prizeSlots} 个奖品，但提供了 ${this.prizes.length} 个。`,
          );
        }
      },

      initializeGrid() {
        // 初始化网格项目和序列数组
        this.gridItems = [];
        this.sequence = [];
        let prizeIndex = 0;

        // 遍历行和列，创建网格项目
        for (let i = 0; i < this.rows; i++) {
          for (let j = 0; j < this.cols; j++) {
            if (this.isCenter(i, j)) {
              // 如果是中心格，添加一个中心项目
              this.gridItems.push({
                isCenter: true,
              });
            } else {
              // 否则，添加一个奖品项目
              this.gridItems.push({
                ...this.prizes[prizeIndex],
                isCenter: false,
              });
              prizeIndex++;

              // 如果是边缘格，将其索引添加到序列中
              if (i === 0 || i === this.rows - 1 || j === 0 || j === this.cols - 1) {
                this.sequence.push(i * this.cols + j);
              }
            }
          }
        }

        // 调整序列顺序
        this.adjustSequence();
      },

      isCenter(row, col) {
        // 判断给定的行列是否为中心格
        return row > 0 && row < this.rows - 1 && col > 0 && col < this.cols - 1;
      },

      adjustSequence() {
        // 调整序列顺序，使其按照顺时针方向排列
        const newSequence = [];
        // 上边
        for (let j = 0; j < this.cols; j++) {
          newSequence.push(j);
        }
        // 右边
        for (let i = 1; i < this.rows - 1; i++) {
          newSequence.push(i * this.cols + this.cols - 1);
        }
        // 下边
        for (let j = this.cols - 1; j >= 0; j--) {
          newSequence.push((this.rows - 1) * this.cols + j);
        }
        // 左边
        for (let i = this.rows - 2; i > 0; i--) {
          newSequence.push(i * this.cols);
        }
        this.sequence = newSequence;
      },

      startLottery(startLottery) {
        // 开始抽奖
        if (this.isRunning) return;
        // 初始化抽奖参数
        this.isRunning = true;
        this.speed = 50;
        // this.currentIndex = -1;
        this.rounds = 0;
        // 随机选择目标索引
        this.targetIndex = startLottery;
        // 计算总步数
        this.totalSteps = this.minRounds * this.sequence.length + this.targetIndex + 1;
        // 开始运行抽奖
        this.runLottery();
      },

      runLottery() {
        // 运行抽奖过程
        this.currentIndex++;
        // 如果到达序列末尾，重置索引并增加轮数
        if (this.currentIndex >= this.sequence.length) {
          this.currentIndex = 0;
          this.rounds++;
        }

        // 计算当前步数
        const currentStep = this.rounds * this.sequence.length + this.currentIndex;

        // 如果达到总步数，结束抽奖
        if (currentStep >= this.totalSteps - 1) {
          this.currentIndex = this.targetIndex;
          this.isRunning = false;
          // 触发抽奖结束事件
          this.$emit('lottery-end', this.gridItems[this.sequence[this.currentIndex]]);
          return;
        }

        // 修改速度计算逻辑
        const progress = currentStep / this.totalSteps;
        this.speed = this.calculateSpeed(progress);

        setTimeout(() => this.runLottery(), this.speed);
      },

      calculateSpeed(progress) {
        // 使用父组件传入的参数计算速度
        return (
          this.minSpeed +
          (this.maxSpeed - this.minSpeed) * Math.pow(progress, this.accelerationRate)
        );
      },

      isActive(index) {
        // 判断给定索引是否为当前活动项
        if (!this.isRunning && this.currentIndex === -1) return false;
        return this.sequence[this.currentIndex] === index;
      },

      // 移除 getItemStyle 方法，因为我们现在直接在模板中处理样式
      getItemStyle(item, index) {
        if (item.isCenter) {
          return {};
        }
        if (this.isActive(index)) {
          return {
            ...this.prizeItemStyle,
            ...this.activeItemStyle,
          };
        }
        return this.prizeItemStyle;
      },
    },
  };
</script>

<style scoped>
  .lottery-grid {
    display: grid;
    grid-gap: 10px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
  }

  .grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    aspect-ratio: 1;
  }

  .grid-item-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .grid-item-content-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .grid-item-content-img {
    width: 50%;
    height: 50%;
    position: relative;
    z-index: 9;
  }

  .grid-item-content-text {
    margin-top: 10rpx;
    position: relative;
    z-index: 1;
  }

  .prize-item {
    /* 移除默认样式，由父组件控制 */
  }

  .start-btn {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .start-btn-content {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ff6b6b;
    color: white;
    font-weight: bold;
    font-size: 18px;
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }

</style>
